<template>
	<doubleBackHeaderVue></doubleBackHeaderVue>
	<view class="commitDetails-page">
		<view class="UserImage">
			<image class="Avatar" :src="imageUrl+commitDetailsData?.pub_img" mode="aspectFill"></image>
			<view class="Name">
				<text>{{commitDetailsData?.pub_nick_name}}</text>
				<text class="time">{{commitDetailsData?.create_time}}</text>
			</view>
		</view>
		<view class="title">{{commitDetailsData?.trip_blog_title}}</view>
		<text class="Details-Content">{{commitDetailsData?.trip_blog_content}}</text>
		<view class="image-box" @click="gotoPageSelf(item.CommunityID)"> 
			<block v-for="(itemImg,inde) in commitDetailsData?.img_list" :key="index">
				<image class="item-iameg" mode="widthFix" :src="imageUrl+itemImg"></image>
			</block>
		</view>
		<view class="Views">
			<text>{{ commitDetailsData?.blog_view || '0' }}次浏览</text>
			<view class="icon-item" @click="isLiack(commitDetailsData?.CommunityID)">
				<uni-icons v-if="commitDetailsData?.is_like==1" color="#fc394b" type="hand-up-filled" size="20"></uni-icons>
				<uni-icons v-if="commitDetailsData?.is_like==0" type="hand-up" size="20"></uni-icons>
				<view class="iconNumber">{{commitDetailsData?.blog_like}}</view>
			</view>
		</view>
		<LoopShopCardVue :ShopCardData='commitDetailsData'></LoopShopCardVue>
		<button class="share-button" open-type="share">
			<image src="@/static/eIcones/分享.png" mode=""></image>
			<text>分享</text>
		</button>
	</view>
</template>

<script setup>
	import { imageUrl } from '@/config/request/request';
	import {onLoad} from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { Postdetail,PostLike } from '@/config/API/commit';
	import doubleBackHeaderVue from '@/components/doubleBackHeader.vue'
	import LoopShopCardVue from './components/LoopShopCard.vue';
	const commitDetailsData = ref()
	const commitCardId = ref()
	onLoad(async(options)=>{
		commitCardId.value = options.id
		console.log('commitCardId卡片id',commitCardId.value)
		const resData = await Postdetail(commitCardId.value)
		commitDetailsData.value = resData.data
		console.log('详细信息=》》》',commitDetailsData.value)
	})
	const isLiack = async(id) =>{
		const data = await PostLike(id)
		console.log('是否点赞成功===>>',data)
		if(data.code==200){
			commitDetailsData.value.is_like==0?commitDetailsData.value.is_like=1:commitDetailsData.value.is_like=0
			commitDetailsData.value.is_like==1?commitDetailsData.value.blog_like+=1:commitDetailsData.value.blog_like-=1
		}else if(data.code==309){
			uni.navigateTo({
				url: '/pages/Login/Login'
			});
		}
	}
</script>

<style scoped lang="scss">
	.commitDetails-page{
		width: 100%;
		min-height: 80vh;
		padding: 24rpx;
		padding-bottom: 80rpx;
		box-sizing: border-box;
		.UserImage{
			display: flex;
			align-items: center;
			gap: 30rpx;
			margin: 40rpx 0;
			.Avatar{
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
			}
			.Name{
				display: flex;
				flex-direction: column;
				gap: 5rpx;
				text{
					max-width: 80vw;
					font-size: 30rpx;
					color: #1a1a1a;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1; /* 设置最大行数 */
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.time{
					font-size: 26rpx;
					color: #8f8f8f;
				}
			}
		}
		.title{
			margin: 24rpx 0;
			font-size: 30rpx;
		}
		.Details-Content{
			font-size: 26rpx;
			color: #000020;
			font-weight: 300;
		}
		.image-box{
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			margin: 50rpx 0;
			.item-iameg{
				width: 100%;
				border-radius: 6rpx;
			}
		}
		.Views{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0 60rpx 0;
			text{
				font-size: 30rpx;
				color: #8a8a8a;
			}
			.icon-item{
				display: flex;
				align-items: center;
				gap: 4rpx;
				.iconNumber{
					font-size: 30rpx;
				}
			}
		}
		.share-button {
			width: 340rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			margin: 60rpx auto;
			border-radius: 200rpx;
			border: 1rpx solid #999;
			background-color: transparent;
			padding: 4rpx 0;
			&::after{
				border: none;
			}
			image {
				width: 40rpx;
				height: 36rpx;
			}
			text {
				font-size: 28rpx;
				color: #717171;
			}
		}
	}
</style>
